<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-input v-if="this.userType === 1" @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="平台编号" v-model="platformId"> </el-input>
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户编号" v-model="listQuery.customerId"> </el-input>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
    <el-button class="filter-item"   style="margin-left: 10px;color:#999999; background-color:white;border-color:#ececec" @click="handleCreateSecect" type="primary" icon="edit">设置</el-button>
  </div>
  <el-dialog title="选择" :visible.sync="dialogSelectTableVisible"
:before-close="handleClose"
>
<el-checkbox-group v-model="checkList">
  <el-checkbox label="platformId">平台编号</el-checkbox>
  <el-checkbox label="customerId">用户编号</el-checkbox>
  <el-checkbox label="passwordErrorCount">登录密码错误次数</el-checkbox>
  <el-checkbox label="payPasswordErrorCount" >支付密码错误次数</el-checkbox>
  <el-checkbox label="passwordStatus" >登录密码状态</el-checkbox>
  <el-checkbox label="payPasswordStatus">支付密码状态</el-checkbox>
  <el-checkbox label="personalId">个人客户编号</el-checkbox>
  <el-checkbox label="merchantId">商户客户编号</el-checkbox>
  <el-checkbox label="status" >账户状态</el-checkbox>
  <el-checkbox label="authenticationStatus" >认证状态</el-checkbox>
</el-checkbox-group>
</el-dialog>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
    <el-table-column  align="center" :key="fruit" v-for='fruit in formThead' :label="formTheadName[fruit]" :width="formTheadWidth[fruit]">
  <template slot-scope="scope">
    <div v-if = "fruit === 'authenticationStatus'" width="190" >
      <span v-if="scope.row.authenticationStatus === '00'">未认证</span>
      <span v-if="scope.row.authenticationStatus === '01'">无需认证</span>
      <span v-if="scope.row.authenticationStatus === '02'">认证成功</span>
      <span v-if="scope.row.authenticationStatus === '03'">认证失败</span>
    </div>
    <div v-else-if = "fruit === 'status'" >
      <span v-if="scope.row.status === '00'">正常</span>
      <span v-if="scope.row.status === '01'">冻结</span>
    </div>
    <div v-else-if = "fruit === 'passwordStatus'" >
      <span v-if="scope.row.passwordStatus === '00'">正常</span>
      <span v-if="scope.row.passwordStatus === '01'">未设置</span>
      <span v-if="scope.row.passwordStatus === '02'">锁定</span>
    </div>
    <div v-else-if = "fruit === 'payPasswordStatus'" >
      <span v-if="scope.row.payPasswordStatus === '00'">正常</span>
      <span v-if="scope.row.payPasswordStatus === '01'">未设置</span>
      <span v-if="scope.row.payPasswordStatus === '02'">锁定</span>
    </div>
    <div v-else >
      {{scope.row[fruit]}}
    </div>
  </template>
</el-table-column>
    <!-- <el-table-column width="110" align="center" label="平台编号"> <template scope="scope">
          <span>{{scope.row.platformId}}</span>
        </template> </el-table-column>
    <el-table-column width="160" align="center" label="用户编号"> <template scope="scope">
          <span>{{scope.row.customerId}}</span>
        </template> </el-table-column>
    <el-table-column width="110" align="center" label="登录密码错误次数"> <template scope="scope">
            <span>{{scope.row.passwordErrorCount}}</span>
          </template> </el-table-column>
    <el-table-column width="110" align="center" label="支付密码错误次数"> <template scope="scope">
            <span>{{scope.row.payPasswordErrorCount}}</span>
          </template> </el-table-column>
    <el-table-column width="100" align="center" label="登录密码状态"> <template scope="scope">
            <span v-if="scope.row.passwordStatus === '00'">正常</span>
            <span v-if="scope.row.passwordStatus === '01'">未设置</span>
            <span v-if="scope.row.passwordStatus === '02'">锁定</span>
          </template> </el-table-column>
    <el-table-column width="100" align="center" label="支付密码状态"> <template scope="scope">
            <span v-if="scope.row.payPasswordStatus === '00'">正常</span>
            <span v-if="scope.row.payPasswordStatus === '01'">未设置</span>
            <span v-if="scope.row.payPasswordStatus === '02'">锁定</span>
          </template> </el-table-column>
    <el-table-column width="110" align="center" label="个人客户编号"> <template scope="scope">
            <span>{{scope.row.personalId}}</span>
          </template> </el-table-column>
    <el-table-column width="180" align="center" label="商户客户编号"> <template scope="scope">
          <span>{{scope.row.merchantId}}</span>
        </template> </el-table-column>
    <el-table-column width="110" align="center" label="账户状态"> <template scope="scope">
            <span v-if="scope.row.status === '00'">正常</span>
            <span v-if="scope.row.status === '01'">冻结</span>
          </template> </el-table-column>
    <el-table-column width="110" align="center" label="认证状态"> <template scope="scope">
            <span v-if="scope.row.authenticationStatus === '00'">未认证</span>
            <span v-if="scope.row.authenticationStatus === '01'">无需认证</span>
            <span v-if="scope.row.authenticationStatus === '02'">认证成功</span>
            <span v-if="scope.row.authenticationStatus === '03'">认证失败</span>
          </template> </el-table-column> -->
    <el-table-column align="center" label="操作" width="500"> <template scope="scope">
        <el-button v-if="customerBaseManager_btn_pwd_update" size="small" type="success" @click="handlePwdUpdate(scope.row)">密码重置</el-button>
        <el-button v-if="customerBaseManager_btn_status_update" size="small" type="success" @click="handleStatusUpdat(scope.row)">设置客户状态</el-button>

        <el-button v-if="customerBaseManager_btn_status_update && scope.row.merchantId != '' && scope.row.merchantId != null && scope.row.merchantId != undefined" size="small" type="success" @click="merchantDetail(scope.row)">企业客户详情</el-button>
        <el-button v-if="customerBaseManager_btn_status_update && scope.row.personalId != '' && scope.row.personalId != null && scope.row.personalId != undefined" size="small" type="success" @click="personalDetail(scope.row)">个人客户详情</el-button>
      </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form :model="form" ref="form">
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="请选择" @change="selectTypeChange">
          <el-option
            v-for="item in selectTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogStatus=='updateStatus'" label="状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
            v-for="item in selectStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialogStatus=='updatePwd'" label="手机号" :label-width="formLabelWidth">
        <el-input style="width:200px;" v-model="form.phone" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitButton()">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import { page, resetPassword, updateStatus } from '@/api/crm/customers/customerBase'
import { addOrUpdate, queryObj } from '@/api/crm/customers/personalBase'
import { mapGetters } from 'vuex'
export default {
  name: 'customers',
  data() {
    return {
      queryObjdata: {
        userId: undefined,
        platformId: undefined,
        pageTag: 'customerBase'
      },
      addOrUpdate: {
        userId: undefined,
        platformId: undefined,
        pageTag: 'customerBase',
        columns: undefined
      },
      checkList: ['platformId', 'customerId', 'passwordErrorCount', 'payPasswordErrorCount', 'passwordStatus', 'payPasswordStatus', 'personalId', 'merchantId', 'status', 'authenticationStatus'],
      formThead: ['platformId', 'customerId', 'passwordErrorCount', 'payPasswordErrorCount', 'passwordStatus', 'payPasswordStatus', 'personalId', 'merchantId', 'status', 'authenticationStatus'],
      formTheadName: {
        platformId: '平台编号',
        customerId: '用户编号',
        passwordErrorCount: '登录密码错误次数',
        payPasswordErrorCount: '支付密码错误次数',
        passwordStatus: '登录密码状态',
        payPasswordStatus: '支付密码状态',
        personalId: '个人客户编号',
        merchantId: '商户客户编号',
        status: '账户状态',
        authenticationStatus: '认证状态'
      },
      formTheadWidth: {
        platformId: '110',
        customerId: '160',
        passwordErrorCount: '110',
        payPasswordErrorCount: '110',
        passwordStatus: '110',
        payPasswordStatus: '110',
        personalId: '100',
        merchantId: '160',
        status: '110',
        authenticationStatus: '100'
      },
      platformId: undefined,
      listQuery: {
        page: 1,
        limit: 10,
        platformId: '',
        customerId: ''
      },
      form: {
        customerId: '',
        type: '',
        status: '',
        phone: ''
      },
      list: null,
      dialogSelectTableVisible: false,
      selectTypeOptions: [],
      selectStatusOptions: [],
      passwordOptions: [{
        value: '0',
        label: '登录密码'
      }, {
        value: '1',
        label: '支付密码'
      }],
      statusOptions: [{
        value: '2',
        label: '登录密码状态'
      }, {
        value: '3',
        label: '支付密码状态'
      }, {
        value: '4',
        label: '客户状态'
      }],
      payStatusOptions: [{
        value: '00',
        label: '正常'
      }, {
        value: '01',
        label: '未设置'
      }, {
        value: '02',
        label: '锁定'
      }],
      customerStatusOptions: [{
        value: '00',
        label: '正常'
      }, {
        value: '01',
        label: '冻结'
      }],
      total: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogStatus: '',
      customerBaseManager_btn_pwd_update: false,
      customerBaseManager_btn_status_update: false,
      textMap: {
        updatePwd: '重置密码',
        updateStatus: '设置客户状态'
      },
      tableKey: 0,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.queryObj()
    this.getList()
    this.customerBaseManager_btn_pwd_update = this.elements['customerBaseManager:btn_pwd_update']
    this.customerBaseManager_btn_status_update = this.elements['customerBaseManager:btn_status_update']
  },
  computed: {
    ...mapGetters([
      'elements',
      'name',
      'userType',
      'userId'
    ])
  },
  watch: {
    checkList(valArr) {
      this.formThead = this.checkList.filter(i => valArr.indexOf(i) >= 0)
      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  methods: {
    handleClose(done) {
      this.listLoading = true
      this.addOrUpdate.platformId = this.platformId
      this.addOrUpdate.userId = this.userId
      this.addOrUpdate.columns = this.checkList.join(',')
      addOrUpdate(this.addOrUpdate)
        .then(response => {
          this.listLoading = false
          console.log('成功000000000000000000000000000')
        })
      done()
    },
    queryObj() {
      this.listLoading = true
      this.queryObjdata.platformId = this.platformId
      this.queryObjdata.userId = this.userId
      queryObj(this.queryObjdata)
        .then(response => {
          if (response.code === '0000') {
            console.log(response.baseUserTableField)
            if (response.baseUserTableField !== null && response.baseUserTableField !== '' && response.baseUserTableField !== undefined) {
              var showColumnsStr = response.baseUserTableField.columns
              if (showColumnsStr.length !== 0) {
                this.checkList = showColumnsStr.split(',')
                this.formThead = showColumnsStr.split(',')
              }
            }
          }
          this.listLoading = false
        })
    },
    handleCreateSecect() {
      this.form = {}
      this.dialogStatus = 'Secect'
      this.dialogSelectTableVisible = true
    },
    getList() {
      this.listLoading = true
      this.listQuery.platformId = this.platformId
      page(this.listQuery)
        .then(response => {
          this.list = response.body.data.rows
          this.total = response.body.data.total
          this.listLoading = false
        })
    },
    handlePwdUpdate(row) {
      this.dialogStatus = 'updatePwd'
      this.dialogFormVisible = true
      this.form.customerId = row.customerId
      this.form.type = ''
      this.selectTypeOptions = this.passwordOptions
    },
    handleStatusUpdat(row) {
      this.dialogStatus = 'updateStatus'
      this.dialogFormVisible = true
      this.form.customerId = row.customerId
      this.form.type = ''
      this.form.status = ''
      this.selectTypeOptions = this.statusOptions
    },
    selectTypeChange(vId) { // 这个vId也就是value值
      if (vId === '2' || vId === '3') {
        this.selectStatusOptions = this.payStatusOptions
      } else if (vId === '4') {
        this.selectStatusOptions = this.customerStatusOptions
      } else {
        this.selectStatusOptions = []
      }
    },
    submitButton() {
      if (this.form.type === '0' || this.form.type === '1') {
        resetPassword(this.form)
          .then(response => {
            if (response.body.code === '0000') {
              this.$notify({
                title: '成功',
                message: '密码重置成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '密码重置失败',
                type: 'fail',
                duration: 2000
              })
            }
            this.dialogFormVisible = false
            this.getList()
          })
      } else {
        updateStatus(this.form)
          .then(response => {
            console.log(response)
            if (response.body.code === '0000') {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '修改失败',
                type: 'fail',
                duration: 2000
              })
            }
            this.dialogFormVisible = false
            this.getList()
          })
      }
    },
    handleFilter() {
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    personalDetail(row) {
      this.$router.push({ path: '/customerManager/personalBaseDetail', query: { personalId: row.personalId }})
    },
    merchantDetail(row) {
      this.$router.push({ path: '/customerManager/merchantBaseDetail', query: { merchantId: row.merchantId }})
    }
  }
}
</script>
